<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./images/head/logoIcon.png" type="image/x-icon">
    <link rel="stylesheet" href="./CSS/css.css">
    <script src="./JS/jquery-3.4.1.min.js"></script>
    <title>爱奇艺</title>
</head>

<body>
    <div id="head">
        <div id="logo">
            <img src="./images/head/logo.png" alt="" srcset="">
        </div>
        <div id="serach">
            <div class="sinput">
                <input type="text" placeholder="我们的新时代">
                <div class="shot">
                    <img src="./images/head/hot.png" alt="" srcset=" ">
                    <span>热搜榜</span>
                </div>
                <span class="shr"></span>
                <div class="sall">
                    <img src="./images/head/search.png" alt="" srcset=" ">
                    <span>搜全网</span>
                </div>
                <ul>
                    <li>热门搜索</li>
                    <li><span>1</span><span>奇葩说</span></li>
                    <li><span>2</span><span>奥特曼</span></li>
                    <li><span>3</span><span>海贼王</span></li>
                    <li><span>4</span><span>大江大河</span></li>
                    <li><span>5</span><span>流金岁月</span></li>
                    <li><span>6</span><span>潮流合伙人</span></li>
                    <li><span>7</span><span>终极笔记</span></li>
                    <li><span>8</span><span>奔跑吧兄弟</span></li>
                    <li><span>9</span><span>木鱼</span></li>
                    <li><span>10</span><span>爱情公寓</span></li>
                </ul>
            </div>
            <div class="sicon">
                <div><img src="./images/head/VIP-gold.png" alt=""><span>VIP</span>
                    <!-- 下拉列表 -->
                    <div class="listDown">
                        <div class="vipTOP"> </div>
                        <div class="vipleft">
                            <ul>
                                <li>
                                    <img src="./images/head/VIP-lightgold.png" alt="" srcset="">
                                    <span>了解VIP会员特权</span>
                                </li>
                                <li>
                                    <img src="./images/head/gift.png" alt="" srcset="">
                                    <span>领取VIP会员福利</span>
                                </li>
                                <li>
                                    <img src="./images/head/award.png" alt="" srcset="">
                                    <span>做任务领取奖励</span>
                                </li>
                                <li>
                                    <img src="./images/head/diamond.png" alt="" srcset="">
                                    <span>星钻VIP享新权益</span>
                                </li>
                            </ul>
                        </div>
                        <div class="vipright">
                            <img src="./images/head/code.png" alt="">
                        </div>
                        <div class="vipbottom">
                            <span>
                                登录
                            </span>
                        </div>
                    </div>
                </div>
                <div><img src="./images/head/game-white.png" alt=""><span>游戏</span></div>
                <div><img src="./images/head/upload-white.png" alt=""><span>上传</span></div>
                <div><img src="./images/head/TV-white.png" alt=""><span>客户端</span></div>
                <div><img src="./images/head/bell-white.png" alt=""><span>消息</span></div>
                <div><img src="./images/head/clock-white.png" alt=""><span>看过</span></div>
            </div>
            <div class="suser">
                <img src="./images/head/user.png" alt="">
                <span>登录</span>
                <div class="red_point"></div>
            </div>
        </div>
    </div>
    <div class="lunbo">
        <!-- 轮播图片 -->
        <div class="content">
            <div class="images">
                <img src="./images/bg1.jpg" alt="">
                <img src="./images/bg2.jpg" alt="">
                <img src="./images/bg3.jpg" alt="">
                <img src="./images/bg4.jpg" alt="">
                <img src="./images/bg5.jpg" alt="">
                <img src="./images/bg6.jpg" alt="">
                <img src="./images/bg7.jpg" alt="">
                <img src="./images/bg8.jpg" alt="">
                <img src="./images/bg9.jpg" alt="">
                <img src="./images/bg10.jpg" alt="">
            </div>
            <div class="mask_top"></div>
            <div class="mask_bottom"></div>
            <div class="mask_left"></div>
            <div class="mask_right"></div>

            <div class="right_text">
                <ul>
                    <li class="select">
                        <p>建党百年</p>
                        <p>庆祝建党100周年文艺演出</p>
                    </li>
                    <li>
                        <p>声动中国</p>
                        <p>声动中国》建党百年特别节目</p>
                    </li>
                    <li>
                        <p><img src="./images/VIP-flag.png" alt="">我们的新时代</p>
                        <p>青年党员的热血故事</p>
                    </li>
                    <li>
                        <p>骑迹中国</p>
                        <p>用摩托骑迹中国的美丽乡村</p>
                    </li>
                    <li>
                        <p><img src="./images/VIP-flag.png" alt="">理想之城</p>
                        <p>孙俪赵又廷展现职场众生相</p>
                    </li>
                    <li>
                        <p><img src="./images/VIP-flag.png" alt="">喵，请许愿</p>
                        <p>任宥纶葛鑫怡萌甜“人喵奇缘”</p>
                    </li>
                    <li>
                        <p><img src="./images/VIP-flag.png" alt="">六个团子</p>
                        <p>网红"耳廓狐水獭家族登场</p>
                    </li>
                    <li>
                        <p>我们的新生活</p>
                        <p>7.23共赴新生活 一起来乐呵</p>
                    </li>
                    <li>
                        <p>最美中轴线</p>
                        <p>孟美岐套路胡彦斌喝豆汁</p>
                    </li>
                    <li>
                        <p>我和我们在一起</p>
                        <p>爱就是给予温暖</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="imgList">
        <div class="filecontent">
            <div class="fleft">
                <div>
                    <p>电影<span>MOVIES</span></p>
                    <p>热门大片</p>
                    <p>全部电影</p>
                </div>
                <div>
                    <p>电视剧<span>TV SHOWS</span></p>
                    <p>迷雾剧场</p>
                    <p>爱青春</p>
                </div>
                <div>
                    <p>综艺<span>VARIETY SHOWS</span></p>
                    <p>王牌自制</p>
                    <p>最近热播</p>
                </div>
                <div>
                    <p>动漫<span>ANIME</span></p>
                    <p>最热国漫</p>
                    <p>新番上线</p>
                </div>
                <div>
                    <p>儿童<span>CHILDREN</span></p>
                    <p>最热动漫</p>
                    <p>最新动画</p>
                </div>
                <div>
                    <p>记录片<span>DOCUMENTARIES</span></p>
                    <p>热播剧场</p>
                    <p>探索世界</p>
                </div>
            </div>
            <span></span>
            <div class="fcenter">
                <div class="fcenter_f">
                    <p>热点</p>
                    <p>记录片</p>
                    <p>知识</p>
                </div>
                <div class="fcenter_r">
                    <p>资讯</p>
                    <p>新片</p>
                    <p>财经</p>
                </div>
            </div>
            <span></span>
            <div class="fright">
                <div>
                    <p>会员精选</p>
                    <p>直播中心</p>
                    <div>
                        <p>更多<img src="./images/more.png" alt="" srcset="">

                        <div class="moredownbox">
                            <table>
                                <tr>
                                    <td>资讯</td>
                                    <td>军事</td>
                                    <td>音乐</td>
                                    <td>漫画</td>
                                    <td>旅游</td>
                                    <td>教育</td>
                                </tr>
                                <tr>
                                    <td>财经</td>
                                    <td>母婴</td>
                                    <td>小说</td>
                                    <td>原创</td>
                                    <td>汽车</td>
                                    <td>健康</td>
                                </tr>
                                <tr>
                                    <td>搞笑</td>
                                    <td>生活</td>
                                    <td>商城</td>
                                    <td>科技</td>
                                    <td>教育</td>
                                    <td>时尚</td>
                                </tr>
                            </table>
                        </div>
                    </div>


                    </p>
                </div>
            </div>
        </div>
        <div class="piccontent">
            <div>
                <img src="./images/mini1.jpg" alt="">
                    <p>三分钟回顾建党百年征程</p>
                </img>
            </div>
            <div>
                <img src="./images/mini2.jpg" alt="">
                    <p>2020欧洲杯142粒全进球</p>
                </img>
            </div>
            <div>
                <img src="./images/mini3.jpg" alt="">
                    <p>百年巨匠——中华教育史的丰碑</p>
                </img>
            </div>
            <div>
                <img src="./images/mini4.jpg" alt="">
                    <p>过去与现在超能力大战</p>
                </img>
            </div>
            <div>
                <img src="./images/mini5.jpg" alt="">
                    <p>杨超越球场连续打伤张彬彬</p>
                </img>
            </div>
        </div>
    </div>
</body>

<script>
    $(function () {
        $('.sinput>input').click(function () {
            $('.sinput>ul').css("display", "block")
        })
    });
    $(function () {
        $('.sinput>input').blur(function () {
            $('.sinput>ul').css("display", "none")
        })
    });
    $(function () {
        $('.sicon>div:first-child').mouseover(function () {
            $('.listDown').css("display", "block")
        })
    });
    $(function () {
        $('.sicon>div:first-child').mouseout(function () {
            $('.listDown').css("display", "none")
        })
    });
    //切换图片
    var i = 0;
    setInterval(() => {
        // $('.images img').hide();
        // $('.images img').eq(i).show();
        // // $('.right_text>ul>li:nth-of-type(' + (i+1) + ')').addClass("select");
        // // $('.right_text>ul>li:not(:nth-of-type(' + (i+1) + '))').removeClass("select");
        // $('.right_text li').removeClass('select');
        // $('.right_text li').eq(i).addClass('select');
        lunbo(i);
        i++;
        if (i == 10) {
            i = 0;
        }
        $('.right_text li').mouseover(function () {
            i = $('.right_text li').index(this);
            lunbo(i);
        })

        //鼠标滚动条向下滚动距离大于等于100px时，头部和轮播区域的轮播文字列表消失
        $(window).scroll(function () {
            var top = $(document).scrollTop();
            // console.log(top);
            if (top >= 100) {
                $('#head').hide();
                $('.right_text').hide();
            }
            if (top < 100) {
                $('#head').show();
                $('.right_text').show();
            }
        })

    }, 3000);

    function lunbo(i) {
        $('.images img').hide();
        $('.images img').eq(i).show();
        $('.right_text li').removeClass('select');
        $('.right_text li').eq(i).addClass('select');
    }
</script>

</html>